<template>
  <div class="bghome">
    <q-layout view="hHh LpR fff" style="font-family: 微软雅黑">
      <!-- <q-header class="bg-white text-primary shadow-1">
        <q-toolbar>
          <q-toolbar-title></q-toolbar-title>
          <div>Sika v1.0.0</div>
        </q-toolbar>
      </q-header> -->
      <!-- <q-footer class="bg-white text-blue-grey-4">
        <div class="q-my-lg">
          <div class="text-center q-mb-sm">
            <span class="inline-block q-mr-sm">元气动漫</span>
            <q-btn type="a" target="_blank" unelevated size="12px" dense round>
              <q-avatar size="sm">
                <img
                  alt="quasar"
                  src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"
                />
              </q-avatar>
            </q-btn>
          </div>
          <div class="text-center">
            Copyright@2020 Sika {{ $t('user.layout.experienceDesc') }}
          </div>
          <div class="text-center q-mt-sm">备案号：粤ICP备20068526号-1</div>
        </div>
      </q-footer> -->
      <q-page-container>
        <div class="q-pa-sm row justify-center">
          <div
            class="col text-center bginput"
            style="width: 100%; max-width: 400px"
          >
            <div class="q-mb-xl titlebg">
              <div class="log-cloud cloud1"></div>
              <div class="log-cloud cloud2"></div>
              <div class="log-cloud cloud3"></div>
              <div class="log-cloud cloud4"></div>
              <h4 class="q-ma-sm" style="margin: 0 0; padding: 50px 0 0 0">
                <q-avatar class="q-mr-md">
                  <img
                    alt="Sika logo"
                    src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg"
                  />
                </q-avatar>
                <strong style="color: #ffeb73">元气动漫</strong>
              </h4>
            </div>
            <router-view />
          </div>
        </div>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script>
export default {
  name: 'UserLayout',
  props: {},
  data() {
    return {
      // lang: this.$q.lang.getLocale(),
      topMarginClass: 'q-mt-lg',
    };
  },
  methods: {
    topMargin() {
      console.log(12321);
    },
  },
  mounted: function () {
    // console.log(this.$q.lang.getLocale());
  },
  watch: {
    // lang(lang) {
    //   console.log(lang);
    //   this.$i18n.locale = lang;
    // },
  },
};
</script>
<style scoped lang="scss">
@import 'http://at.alicdn.com/t/font_2136554_95kmewdgocg.css';
.bghome {
  // background-color: #000;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/bg-page.jpg);
  background-size: cover;
}
.bginput {
  width: 100%;
  background: #fff;
  max-width: 400px;
  margin-top: 10%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 16px -5px #070707;
  box-shadow: 0px 3px 16px -5px #070707;
  z-index: 10;
}
.titlebg {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 48px;
  background: url(../assets/login-bg3.jpg);
  background-size: cover;
  width: 100%;
  height: 212px;
  overflow: hidden;
}
.log-cloud {
  background-image: url(../assets/login-cloud.png);
  width: 63px;
  height: 40px;
  position: absolute;
  z-index: 99;
}
.cloud1 {
  top: 10px;
  left: -30px;
  transform: scale(0.6);
  animation: cloud1 20s linear infinite;
}
.cloud2 {
  top: 50px;
  right: 20px;
  animation: cloud2 19s linear infinite;
}
.cloud3 {
  top: 90px;
  left: 5px;
  transform: scale(0.8);
  animation: cloud3 21s linear infinite;
}
.cloud4 {
  top: 120px;
  left: -40px;
  transform: scale(0.4);
  animation: cloud4 19s linear infinite;
}

@-webkit-keyframes cloud1 {
  0% {
    left: 200px;
  }
  100% {
    left: -130px;
  }
}
@keyframes cloud1 {
  0% {
    left: 200px;
  }
  100% {
    left: -130px;
  }
}

@-webkit-keyframes cloud2 {
  0% {
    left: 400px;
  }
  100% {
    left: -90px;
  }
}
@keyframes cloud2 {
  0% {
    left: 400px;
  }
  100% {
    left: -90px;
  }
}

@-webkit-keyframes cloud3 {
  0% {
    left: 620px;
  }
  100% {
    left: -70px;
  }
}
@keyframes cloud3 {
  0% {
    left: 620px;
  }
  100% {
    left: -70px;
  }
}
@-webkit-keyframes cloud4 {
  0% {
    left: 100px;
  }
  100% {
    left: -70px;
  }
}
@keyframes cloud4 {
  0% {
    left: 100px;
  }
  100% {
    left: -70px;
  }
}
</style>
